<template>
  <div
    class="z-single"
    :style="{
      left: left + '%',
      top: top + '%',
    }"
  >
    <el-button
      :type="btnType"
      :icon="isCircle ? icon : ''"
      @click="handleForceSignal()"
      size="mini"
    >
      <slot></slot>
    </el-button>
  </div>
</template>

<script>
import { forceSignal } from "@/api/production/device";
export default {
  props: {
    left: {
      type: Number,
      default: 0,
    },
    top: {
      type: Number,
      default: 0,
    },
    icon: {
      type: String,
      default: "el-icon-back",
    },
    btnType: {
      type: String,
      default: "primary",
    },
    isCircle: {
      type: Boolean,
      default: true,
    },
    params: {
      type: String,
      default: "",
    },
  },
  methods: {
    handleForceSignal() {
      let that = this
      this.$modal
        .confirm("请确认是否强制发送信号")
        .then(function () {
          forceSignal(that.params).then((res) => {
            that.$message({
              type: "success",
              message: res.msg,
            });
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.z-single {
  position: absolute;
  font-size: 20px;
  font-weight: bold;
}
// ::v-deep .el-icon-back{
//   font-size: 30px;
//   font-weight: bold;
// }
// ::v-deep .el-icon-top{
//   font-size: 30px;
//   font-weight: bold;
// }
// ::v-deep .el-icon-finished {
//   font-size: 30px;
//   font-weight: bold;
// }
// ::v-deep .el-button {
//   font-size: 20px;
//   font-weight: bold;
//   letter-spacing: 2px;
// }
</style>